<template>
	<div id="app">
	    <input v-model="message" />
	    <p>Message: {{ message }}</p>
	    <p>Reversed message: {{ reversedMessage }}</p>
	  </div>
</template>

<script>
	import {post} from "@/http";
	
	import {User, Lock} from "@element-plus/icons-vue";
	import {ref, reactive} from 'vue';
	import { createApp } from 'vue';
	import router from "@/router";
	  const App = {
	      data() {
	        return {
	          message: '',
	        };
	      },
	      computed: {
	        reversedMessage() {
	          return this.message.split('').reverse().join('');
	        }
	      },
	      watch: {
	        message(newVal, oldVal) {
	          console.log(`Message changed from ${oldVal} to ${newVal}`);
	        }
	      }
	    };
	    const app = Vue.createApp(App);
	    app.mount('#app');
</script>

<style>
</style>